<template>
  <div class="basetable">
    <!-- v-loading 设置加载 -->
    <div class="selectMenu">
      <!-- 点击触发add方法 -->
      <!-- <el-button size="small" type="primary" @click="add">新增老师</el-button> -->
      <el-button size="small" type="primary" @click="deriveClick"
        >导出</el-button
      >
      <el-dialog
        title="导出片段"
        :visible.sync="dialogVisibletwo"
        width="45%"
        :before-close="handleClose"
      >
        <div>
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="(item, v) in cities" :label="item" :key="v">{{
              item.name
            }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibletwo = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleClick"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <span class="spansearch">教师姓名</span>
      <el-input
        size="small"
        placeholder="输入教师姓名"
        style="width: 100px; margin-left: 16px"
        @input="searchClick"
        clearable
        v-model="input1"
      >
      </el-input>

      <span class="spansearch">教师手机号</span>
      <el-input
        size="small"
        placeholder="输入手机号搜索"
        style="width: 200px; margin-left: 16px"
        @input="searchClicktel"
        clearable
        v-model="inputtel"
      >
      </el-input>
    </div>
    <div class="tableMain">
      <el-table
        :data="
          userList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          fixed
        ></el-table-column>
        <el-table-column prop="name" label="姓名" width="200"></el-table-column>
        <el-table-column
          prop="career"
          label="专业"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="career"
          label="教师资质"
          width="250"
        ></el-table-column>
        <el-table-column
          prop="career"
          label="培训工种"
          width="250"
        ></el-table-column>
        <el-table-column prop="tel" label="电话"></el-table-column>
        <!-- <el-table-column width="200" label="操作" fixed="right">
          <template slot-scope="scope"> -->
        <!-- 点击编辑进入编辑页面进行编辑表格数据 -->
        <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 下面这个用来设置点击添加按钮的弹出框，里面可以进行嵌套表格来展示弹出的表格信息,使用下面的:visible.sync来控制显示与否 -->
    <!-- 里面绑定的是我们新设置的值，填写完成后，将我们这个新值塞到页面中所有的数据当中去 -->

    <!-- 编辑 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 25, 50, 100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userList.length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      userList: [],
      search: "",
      // 设置form用于进行添加的时候绑定值
      form: {},
      value6: "",
      currentIndex: "",
      input1: "", //搜索
      inputtel: "", //搜索
      dialogVisibletwo: false,
      checkedCities: ["姓名", "专业", "教师资质", "培训工种", "电话"],
      cities: [
        { name: "姓名", id: "name" },
        { name: "专业", id: "career" },
        { name: "教师资质", id: "career" },
        { name: "培训工种", id: "career" },
        { name: "电话", id: "tel" },
      ],
      arr1:'',
      arr2:'',
    };
  },
  created() {
    this.thlists();
    // this.update()
  },
  methods: {
    // 导出
    deriveClick() {
      this.dialogVisibletwo = true;
    },
    // 导出字段
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    dialogVisibleClick() {
      this.dialogVisibletwo = false;
      this.export2Excel();
    },
    handleClose(done) {
      done();
    },
    handleCheckedCitiesChange(value) {
      this.arr1 = value.map((item) => item.name).slice(5);
      this.arr2 = value.map((item) => item.id).slice(5);
      let a = JSON.parse(JSON.stringify(this.arr1));
      let b = JSON.parse(JSON.stringify(this.arr2));
      console.log("a",a);
      console.log("b",b);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 导出
    export2Excel() {
      require.ensure([], () => {
        let a = JSON.parse(JSON.stringify(this.arr1));
        let b = JSON.parse(JSON.stringify(this.arr2));
        const { export_json_to_excel } = require("../../excal/Export2Excel");
        const tHeader = a; // 上面设置Excel的表格第一行的标题
        const filterVal = b; // 上面的index、phone_Num、school_Name是tableData里对象的属性
        const list = this.userList; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "教师列表");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    closeDialog() {
      this.form = "";
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    //教师列表
    async thlists() {
      let a = (await this.$api.home.teacherLists({})).data.data;
      this.userList = a;
    },
    // 增加数据的方式，单独的设置一些值，用于增加功能，这些值放在对象里面进行设置，然后将这个新增的对象塞到总数据里面

    // handleEdit(index, row) {

    //   // 将数据的index传递过来用于实现数据的回显
    //   this.form = this.userList[index];
    //   this.currentIndex = index;
    //   // 设置对话框的可见
    //   this.dialogFormVisiblea = true;
    // },
    cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisiblea = false;
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
    //搜索
    searchClick() {
      let searchText = this.input1;
      let list = [];
      if (searchText) {
        list = this.userList.filter((e) => {
          return e.name.match(searchText);
        });
        this.userList = list;
      } else {
        this.thlists();
      }
    },
    //搜索
    searchClicktel() {
      let searchText = this.inputtel;
      let list = [];
      if (searchText) {
        list = this.userList.filter((e) => {
          return e.tel.match(searchText);
        });
        this.userList = list;
      } else {
        this.thlists();
      }
    },
  },
};
</script>
<style lang="less" scope>
.tableMain {
  margin-top: 10px;
}
.page {
  float: left;
  margin-top: 10px;
}
//搜索框文字
.spansearch {
  color: #409eff;
  font-size: 15px;
  margin-left: 20px;
}

.el-input--suffix {
  .el-input-group__append {
    border-color: #1890ff;
    .btnSearch {
      background: #1890ff;
      color: #fff;
      border-radius: 0;
    }
  }
}
</style>